<template>
  <div class="infusion">
    <Row :gutter="16">
      <Col span="8">
        <Card style="height:710px;">
          <Tabs type="card" @on-click="changeTabs">
            <TabPane :label="`静滴(${dropsList.length})`">
              <Input
                placeholder="请输入患者姓名或者诊疗号"
                v-model="keyword"
                @on-enter="changeKey"
                @on-clear="changeKey"
                clearable
              ></Input>
              <div style="height:610px;overflow:auto;">
                <div class="ul" v-for="(item, index) in dropsList" :key="index">
                  <div class="items">
                    <div class="item_li">
                      <!-- <div class="order">{{item.order_num}}号</div> -->
                      <div>
                        <div class="titleName">
                          <div>
                            {{ item.patient.name }} {{ item.patient.age }}
                            {{ item.patient.gender }}
                            {{ item.patient.clinic_name }}
                            {{ item.patient.patient_card_id }}
                          </div>
                          <!-- <div class="ivu-mr-16" style="color:#f00;cursor: pointer;" v-if="+item.status!==2||item.is_pass!==0" @click="changebackout(item)">撤销</div> -->
                          <Button
                            class="ivu-mr-16"
                            type="error"
                            size="small"
                            v-if="+item.status !== 2 || item.is_pass !== 0"
                            @click="changebackout(item)"
                            >撤销</Button
                          >
                        </div>
                        <div
                          class="description"
                          v-for="drug in item.drug_list"
                          :key="drug.drug_config_id"
                        >
                          {{ drug.drug_content }}
                          <div>
                            <Tooltip
                              placement="right"
                              transfer
                              max-width="200"
                              v-if="drug.drug_remark !== ''"
                            >
                              <div
                                style="color:#ff9900;cursor: pointer;width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                              >
                                {{ drug.drug_remark }}
                              </div>
                              <template #content>
                                <p>{{ drug.drug_remark }}</p>
                              </template>
                            </Tooltip>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="action">
                      <div class="action_ac">
                        <!-- <a @click="countDown(item, index)" :disabled="item.disabled" :class="item.isActive ? 'activeClass' : ''">{{item.content}}</a> -->
                        <a
                          @click="countDown(item, index, 1)"
                          :disabled="jdtime > 0 ? true : false"
                          v-if="item.status == 1 && jdShow"
                          >叫号</a
                        >
                        <a
                          class="activeClass"
                          v-if="item.status == 2 && item.is_pass == 0"
                          >叫号中{{ jdtime }}s</a
                        >
                        <a
                          class="moveClass"
                          v-if="item.status == 2 && item.is_pass == 1"
                          >已过号</a
                        >
                        <Divider type="vertical" />
                        <a @click="changeInfusion(item)" v-if="isShow"
                          >开始输液</a
                        >
                        <Divider type="vertical" />
                        <a
                          @click="printClick(item, 1)"
                          :class="item.is_print_py ? 'printColor' : ''"
                          v-if="itShow"
                          >配药单</a
                        >
                        <Divider type="vertical" />
                        <a
                          @click="printClick(item, 2)"
                          :class="item.is_print_xs ? 'printColor' : ''"
                          v-if="itShow"
                          >巡视单</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabPane>
            <TabPane :label="`肌注(${muscleList.length})`">
              <Input
                placeholder="请输入患者姓名或者诊疗号"
                v-model="keyword"
                @on-enter="changeKey"
                @on-clear="changeKey"
                clearable
              ></Input>
              <div style="height:610px;overflow:auto;">
                <div class="ul" v-for="(it, idx) in muscleList" :key="idx">
                  <div class="items">
                    <div class="item_li">
                      <!-- <div class="order">{{it.order_num}}号</div> -->
                      <div>
                        <div class="titleName">
                          <div>
                            {{ it.patient.name }} {{ it.patient.age }}
                            {{ it.patient.gender }}
                            {{ it.patient.clinic_name }}
                            {{ it.patient.patient_card_id }}
                          </div>
                          <!-- <div class="ivu-mr-16" style="color:#f00;cursor: pointer;" v-if="+it.status!==2||it.is_pass!==0" @click="changebackout(it)">撤销</div> -->
                          <Button
                            class="ivu-mr-16"
                            type="error"
                            size="small"
                            v-if="+it.status !== 2 || it.is_pass !== 0"
                            @click="changebackout(it)"
                            >撤销</Button
                          >
                        </div>
                        <div
                          class="description"
                          v-for="jzdrug in it.drug_list"
                          :key="jzdrug.drug_config_id"
                        >
                          {{ jzdrug.drug_content }}
                          <div>
                            <Tooltip
                              placement="right"
                              transfer
                              max-width="200"
                              v-if="jzdrug.drug_remark !== ''"
                            >
                              <div
                                style="color:#ff9900;cursor: pointer;width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                              >
                                {{ jzdrug.drug_remark }}
                              </div>
                              <template #content>
                                <p>{{ jzdrug.drug_remark }}</p>
                              </template>
                            </Tooltip>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="action">
                      <div class="action_ac">
                        <!-- <a @click="countDown(it, index,2)" :class="isActive ? 'activeClass' : ''">{{content}}</a> -->
                        <a
                          @click="countDown(it, idx, 2)"
                          :disabled="jztime > 0 ? true : false"
                          v-if="it.status == 1 && jdShow"
                          >叫号</a
                        >
                        <a
                          class="activeClass"
                          v-if="it.status == 2 && it.is_pass == 0"
                          >叫号中{{ jztime }}s</a
                        >
                        <a
                          class="moveClass"
                          v-if="it.status == 2 && it.is_pass == 1"
                          >已过号</a
                        >
                        <Divider type="vertical" />
                        <a @click="changeInfusion(it)" v-if="isShow"
                          >开始输液</a
                        >
                        <!-- <Divider type="vertical" />
                            <a @click="printClick(it,1)" :class="it.print_py_num>0?'printColor':''"  v-if="itShow">配药单</a> -->
                        <Divider type="vertical" />
                        <a
                          @click="printClick(it, 2)"
                          :class="it.is_print_xs ? 'printColor' : ''"
                          v-if="itShow"
                          >巡视单</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <h3>患者列表</h3>
          <Row
            type="flex"
            justify="start"
            :gutter="8"
            class="ivu-mt-8 ivu-mb-8"
          >
            <Col>
              <Input
                placeholder="请输入诊疗号或患者姓名"
                v-model="searchForm.keywords"
                clearable
                @on-enter="changeEnter"
                @on-clear="changeEnter"
              ></Input>
            </Col>
            <Col>
              <DatePicker
                v-model="searchForm.date"
                format="yyyy-MM-dd"
                type="daterange"
                transfer
                :clearable="true"
                placement="bottom-end"
                placeholder="操作日期选择"
                @on-change="askDatasoperate"
                style="width: 200px"
              ></DatePicker>
            </Col>
            <Col>
              <Select
                style="width:200px"
                placeholder="操作类型"
                v-model="searchForm.record_type"
                clearable
                @on-change="changeClinic"
              >
                <Option
                  v-for="clinic in clinicLists"
                  :value="clinic.value"
                  :key="clinic.id"
                  >{{ clinic.title }}</Option
                >
              </Select>
            </Col>
            <Col>
              <Select
                style="width:200px"
                placeholder="请选择诊室"
                v-model="searchForm.clinic_id"
                clearable
                @on-change="changeClinic"
              >
                <Option
                  v-for="clinic in clinicList"
                  :value="clinic.id"
                  :key="clinic.id"
                  v-if="clinic.status === '1'"
                  >{{ clinic.name }}</Option
                >
              </Select>
            </Col>
          </Row>
          <Table
            :loading="loading"
            :columns="columnsoperate"
            :data="operatedata"
          >
            <template slot-scope="{ row }" slot="hospital">
              <span>{{ row.name }}</span>
              <Tag
                class="blueStatus ivu-ml-16"
                v-if="+row.in_hospital_status === 1"
                color="primary"
                >{{ `${+row.in_hospital_status === 1 ? "住院" : ""}` }}</Tag
              >
            </template>
            <template slot-scope="{ row }" slot="label">
              <Poptip word-wrap trigger="hover" placement="right" width="400">
                <Tag
                  v-for="(item, index) in row.tags_name_arr"
                  :key="index"
                  v-if="index < 3"
                >
                  {{ item }}</Tag
                >
                <div slot="content">
                  <Tag
                    v-for="(item, index) in row.tags_name_arr"
                    :key="index"
                    >{{ item }}</Tag
                  >
                </div>
              </Poptip>
            </template>
            <template slot-scope="{ row }" slot="option">
              <a @click="edit(row)" v-if="isdetail">详情</a>
              <Divider type="vertical" />
              <a @click="lineUp(row)" v-if="line">排队</a>
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page
              :total="total"
              :current.sync="page"
              show-total
              show-elevator
              :page-size="pageSize"
              @on-change="changePage"
              :page-size-opts="pageOpts"
              show-sizer
              transfer
              @on-page-size-change="changePageSize"
            />
          </div>
        </Card>
      </Col>
    </Row>
    <!-- 输液 -->
    <Modal v-model="modalstatus" title="信息确认" draggable @on-cancel="cancel">
      <div>
        <div class="info">
          <div class="info_title">
            <span>{{ infusion.patient.name }}</span>
            <span class="ivu-ml-8">{{ infusion.patient.age }}岁</span>
            <span class="ivu-ml-8">{{ infusion.patient.gender }}</span>
          </div>
          <div class="ivu-ml-16 bginfo">
            <Tag
              >{{ infusion.patient.clinic_name }}
              {{ infusion.patient.patient_card_id }}</Tag
            >
          </div>
        </div>
        <h3
          class="ivu-mt-16 ivu-mb-16"
          v-for="infus in infusion.drug_list"
          :key="infus.drug_config_id"
        >
          {{ infus.drug_content }}
        </h3>
        <div>
          <span class="operator">操作人</span>
          <RadioGroup v-model="infusion.operate_id">
            <Radio
              v-for="radio in infusion.operate_member_list"
              :key="radio.id"
              :label="radio.id"
              >{{ radio.realname }}</Radio
            >
          </RadioGroup>
        </div>
      </div>
      <div slot="footer">
        <Button @click="cancel()">取消</Button>
        <Button type="primary" :loading="infusloading" @click="infosave()"
          >确定</Button
        >
      </div>
    </Modal>
    <!-- 编辑操作 -->
    <Drawer
      title="患者治疗详细"
      v-model="modalDrawer"
      width="1200"
      :mask-closable="true"
    >
      <editlist ref="list" :row="row" :clinicLists="clinicLists"></editlist>
    </Drawer>
    <!-- 排队操作 -->
    <Modal
      v-model="linestatus"
      title="排队"
      @on-ok="lineSave"
      draggable
      @on-cancel="lineCancel"
      width="650"
    >
      <div
        class="ivu-mb-16"
        style="border-bottom:1px solid #ccc;padding:10px 0"
      >
        <Tag v-for="(item, index) in tags_name_arr" :key="index">{{
          item
        }}</Tag>
      </div>
      <Row>
        <Col span="12">
          <h3>静滴</h3>
          <CheckboxGroup v-model="jddrugId">
            <Checkbox
              v-for="jd in jdList"
              :key="jd.id"
              :label="jd.id"
              class="ivu-mt-16 line"
              :disabled="
                lineupjdwait.id !== undefined && lineupjdwait.id !== ''
                  ? true
                  : false || +jd.surplus_num === 0
                  ? true
                  : false
              "
            >
              {{ jd.drug_content }}({{ jd.surplus_num }})
              <div
                v-if="+jd.surplus_num === 0"
                style="font-size:12px;color:#ff9900;padding-left: 20px;"
              >
                次数不够，无法进行排队
              </div>
              <div style="font-size:12px;color:#19be6b;padding-left: 20px;">
                {{ jd.drug_remark }}
              </div>
            </Checkbox>
          </CheckboxGroup>
        </Col>
        <Col span="10">
          <h3>肌注</h3>
          <CheckboxGroup v-model="jzdrugId">
            <Checkbox
              v-for="jz in jzList"
              :key="jz.id"
              :label="jz.id"
              class="ivu-mt-16 line"
              :disabled="
                lineupjzwait.id !== undefined && lineupjzwait.id !== ''
                  ? true
                  : false || +jz.surplus_num === 0
                  ? true
                  : false
              "
            >
              {{ jz.drug_content }}({{ jz.surplus_num }})
              <div
                v-if="+jz.surplus_num === 0"
                style="font-size:12px;color:#ff9900;padding-left: 20px;"
              >
                次数不够，无法进行排队
              </div>
              <div style="font-size:12px;color:#19be6b;padding-left: 20px;">
                {{ jz.drug_remark }}
              </div>
            </Checkbox>
          </CheckboxGroup>
        </Col>
      </Row>
    </Modal>
    <!-- 打印操作 -->
    <Modal
      v-model="printstatus"
      title="打印模板"
      @on-ok="printSave"
      @on-cancel="printCancel"
      width="1000"
      draggable
    >
      <div style="max-height:520px;overflow-y:auto">
        <div ref="container" id="printArea">
          <div
            class="drug"
            v-if="printtype === 1"
            v-for="jzdrug in printData.drug_list"
            :key="jzdrug.drug_config_id"
          >
            <div class="ivu-mb-16 fontstyle">
              <span>姓名：</span>
              <span class="dragstyle ivu-ml-16 ivu-mr-16">{{
                printData.patient.name
              }}</span>
              <span class="ivu-ml-16">性别：</span>
              <span class="dragstyle ivu-ml-16 ivu-mr-16">{{
                printData.patient.gender
              }}</span>
              <span class="ivu-ml-16">年龄：</span>
              <span class="dragstyle ivu-ml-16">{{
                printData.patient.age
              }}</span>
            </div>
            <div class="ivu-mb-16 fontstyle">
              <span>诊室：</span>
              <span class="dragstyle ivu-ml-16 ivu-mr-16">{{
                printData.patient.clinic_name
              }}</span>
              <span style="margin-left:32px">诊疗号：</span>
              <span class="dragstyle ivu-ml-16">{{
                printData.patient.patient_card_id
              }}</span>
            </div>
            <div style="margin-bottom:10px;font-size:18px">
              配药信息<span style="font-size:16px">{{
                `${
                  type === 1 ? "（静滴）" : type === 2 ? "（肌注）" : "（静滴）"
                }`
              }}</span>
            </div>
            <h3
              style="margin-bottom:15px"
              v-if="jzdrug.drug_type == '1' && jzdrug.water_type !== ''"
            >
              {{ jzdrug.water_type }} {{ jzdrug.water_volume }} ml
            </h3>
            <h3 v-if="+jzdrug.drug_id > 0">
              {{ jzdrug.drug_name }} {{ jzdrug.drug_volume }}
              {{ jzdrug.drug_unit }}
            </h3>
            <div class="inscribe">
              <!-- <span>诊室:</span>
            <span> {{printData.patient.clinic_name}}</span> -->
              <span>日期:</span>
              <span>
                {{ `${$Date(new Date()).format("YYYY-MM-DD HH:mm:ss")}` }}</span
              >
            </div>
          </div>
          <div class="single" v-if="printtype === 2">
            <div
              v-for="(item, index) in printDataList"
              :key="index"
              :class="
                index + 1 === printDataList.length ? 'singleboxs' : 'singlebox'
              "
            >
              <h1
                style="text-align:center;letter-spacing:25px;padding-top:22px"
                v-if="type === 1 || type === 0"
              >
                输液巡视卡
              </h1>
              <h1
                style="text-align:center;letter-spacing:25px;padding-top:22px"
                v-else
              >
                肌肉注射单
              </h1>
              <div class="druginfo">
                <div class="infobox name">
                  <div>姓名:</div>
                  <div class="dragname dragnames">
                    {{ printData.patient.name }}
                  </div>
                </div>
                <div class="infobox">
                  <div>性别:</div>
                  <div class="dragname dragnames">
                    {{ printData.patient.gender }}
                  </div>
                </div>
                <div class="infobox">
                  <div>年龄:</div>
                  <div class="dragname dragnames">
                    {{ printData.patient.age }}
                  </div>
                </div>
                <div class="infobox">
                  <div>诊室:</div>
                  <div class="dragname">
                    {{ printData.patient.clinic_name }}
                  </div>
                </div>
                <div class="infobox">
                  <div>诊疗号:</div>
                  <div class="dragname">
                    {{ printData.patient.patient_card_id }}
                  </div>
                </div>
              </div>
              <div class="container" v-if="type === 1 || type === 0">
                <div class="contbox">药名、剂量、用法</div>
                <div class="contbox">滴数</div>
                <div class="contbox">执行时间</div>
                <div class="contbox">签名</div>
                <template v-for="printdrug in item">
                  <div class="contbox drugline" :key="printdrug.drug_config_id">
                    <div
                      class="ml"
                      v-if="
                        printdrug.drug_type == '1' &&
                          printdrug.water_type !== ''
                      "
                    >
                      <div>{{ printdrug.water_type }}</div>
                      <div>{{ printdrug.water_volume }} ml</div>
                    </div>
                    <div class="ml" v-if="+printdrug.drug_id > 0">
                      <div>{{ printdrug.drug_name }}</div>
                      <div>
                        {{ printdrug.drug_volume }} {{ printdrug.drug_unit }}
                      </div>
                    </div>
                  </div>
                  <div class="contbox">40-60 滴/分</div>
                  <div class="contbox"></div>
                  <div class="contbox"></div>
                </template>
                <div class="ivu-mt-16" style="text-align: left;">
                  <span>
                    {{
                      `${$Date(new Date()).format("YYYY-MM-DD HH:mm:ss")}`
                    }}</span
                  >
                </div>
              </div>
              <div class="containerelse" v-else>
                <div class="contbox">药名、剂量、用法</div>
                <div class="contbox">执行时间</div>
                <div class="contbox">签名</div>
                <template v-for="printdrug in item">
                  <div class="contbox drugline" :key="printdrug.drug_config_id">
                    <!-- <div class="ml" v-if="printdrug.drug_type=='1'"><div>{{printdrug.water_type}}</div><div>{{printdrug.water_volume}} ml</div></div> -->
                    <div class="ml">
                      <div>{{ printdrug.drug_name }}</div>
                      <div>
                        {{ printdrug.drug_volume }} {{ printdrug.drug_unit }}
                      </div>
                    </div>
                  </div>
                  <div class="contbox"></div>
                  <div class="contbox"></div>
                </template>
                <div class="ivu-mt-16" style="text-align: left;">
                  <span>
                    {{
                      `${$Date(new Date()).format("YYYY-MM-DD HH:mm:ss")}`
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import util from "@/libs/util";
import editlist from "./../compents/editlist.vue";
import {
  queueList,
  queueInfo,
  queueInfusion,
  patientdrugList,
  queueCreate,
  queueCall,
  patientList,
  updatePrint,
  infusiontreatmentrecordtype,
  queueCancel,
  checkTreatmentToday,
} from "@/api/infusion.js";
import { GetClinicList } from "@/api/setting.js";
import dayjs from "dayjs";
export default {
  components: { editlist },
  data() {
    return {
      jdShow: false,
      itShow: false,
      isShow: false,
      isdetail: false,
      line: false,
      content: "叫号",
      totalTime: "",
      canClick: true,
      lineClick: true,
      isActive: false,
      modalstatus: false,
      animal: "",
      searchForm: {
        record_type: "",
        keywords: "",
        date: [new Date(), new Date()],
        clinic_id: "",
      },
      clinicList: [],
      clinicLists: [],
      operatedata: [],
      operateloading: false,
      columnsoperate: [
        {
          title: "基本信息",
          // key: 'name',
          slot: "hospital",
          fixed: "left",
          width: 160,
        },
        // { title: '住院',
        //   slot: 'hospital',
        //   minWidth: 130
        // },
        {
          title: "诊室",
          key: "clinic_name",
          width: 120,
        },
        {
          title: "诊疗号",
          key: "patient_card_id",
          minWidth: 120,
        },
        { title: "标签", slot: "label", minWidth: 180 },
        {
          title: "上次操作时间",
          key: "last_operate_time",
          width: 200,
        },
        {
          title: "类型",
          key: "type_name",
          width: 120,
        },
        {
          title: "操作",
          slot: "option",
          width: 140,
        },
      ],
      page: 1,
      pageSize: 10,
      total: 0,
      pageOpts: [10, 20, 30, 50],
      loading: false,
      modalDrawer: false,
      linestatus: false,
      printstatus: false,
      type: 0,
      jdtime: 0,
      jztime: 0,
      keyword: "",
      dropsList: [], // 静滴
      copydropsList: [],
      muscleList: [], // 肌注
      copymuscleList: [],
      infusion: {
        patient: {
          name: "",
        },
        operate_id: "",
      }, // 输液
      infusloading: false,
      // 排队操作
      jddrugId: [], // 排队静滴
      jzdrugId: [], // 排队肌注
      patient_user_id: "", // id
      jd_wait: {}, // 不同账号登录叫号中数据
      jdList: [],
      jzList: [],
      lineupjdwait: [],
      lineupjzwait: [],
      // 编辑
      row: "",
      // 打印操作
      printtype: null,
      printData: {},
      queue_id: "",
      jdclock: "",
      jzclock: "",
      clock: "",
      muscle: "",
      printDataList: [],
      tags_name_arr: [], // 标签
    };
  },
  created() {
    this.getqueueList();
    this.getclinicList();
    this.getpatientList();
    this.$websocket.closeWebsocket();
    this.$websocket.createWebSocket();
    let token = util.cookies.get("token");
    let currentProject = localStorage.getItem("currentProject");
    if (token) {
      let msg = {
        msgType: "byAuth",
        checkType: 1,
        content: {
          token: token,
          projectId: currentProject,
        },
      };
      this.$websocket.sendSock(msg);
    }
  },
  computed: {
    ...mapGetters("websocket/websocketfun", ["getqueuestatus", "getpatient"]),
  },
  watch: {
    getqueuestatus: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.getqueueList();
        }
      },
    },
    getpatient: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.getpatientList();
        }
      },
    },
    jddrugId(newValue, oldValue) {
      if (newValue.length > oldValue.length) {
        let id = newValue[newValue.length - 1];
        let drugInfo = this.findConfigId(id, this.jdList);
        if (
          (this.lineupjdwait.id !== undefined && this.lineupjdwait.id !== "") ||
          +drugInfo.surplus_num === 0
        ) {
          return false;
        }
        checkTreatmentToday({
          patient_user_id: this.patient_user_id,
          drug_config_id: drugInfo.drug_config_id,
        }).then((res) => {
          if (!res) {
            this.jddrugId.pop();
            this.$Modal.confirm({
              title: "温馨提示",
              content: "<p>当前项目今日已做过治疗是否再次治疗？</p>",
              onOk: () => {
                this.jddrugId.push(id);
              },
            });
          }
        });
      }
    },
    jzdrugId(newValue, oldValue) {
      if (newValue.length > oldValue.length) {
        let id = newValue[newValue.length - 1];
        let drugInfo = this.findConfigId(id, this.jzList);
        if (
          (this.lineupjzwait.id !== undefined && this.lineupjzwait.id !== "") ||
          +drugInfo.surplus_num === 0
        ) {
          return false;
        }
        checkTreatmentToday({
          patient_user_id: this.patient_user_id,
          drug_config_id: drugInfo.drug_config_id,
        }).then((res) => {
          if (!res) {
            this.jzdrugId.pop();
            this.$Modal.confirm({
              title: "温馨提示",
              content: "<p>当前项目今日已做过治疗是否再次治疗？</p>",
              onOk: () => {
                this.jzdrugId.push(id);
              },
            });
          }
        });
      }
    },
  },
  mounted() {
    this.state = JSON.parse(localStorage.getItem("poweredit"));
    for (let item of this.state) {
      if (item.name === "输液大厅叫号") {
        this.jdShow = item.bool;
      } else if (item.name === "输液大厅开始输液") {
        this.isShow = item.bool;
      } else if (item.name === "输液大厅配药单巡视单") {
        this.itShow = item.bool;
      } else if (item.name === "输液大厅详情") {
        this.isdetail = item.bool;
      } else if (item.name === "输液大厅排队") {
        this.line = item.bool;
      }
    }
  },
  methods: {
    findConfigId(id, list) {
      let drugInfo = "";
      list.forEach((item) => {
        if (item.id == id) {
          return (drugInfo = item);
        }
      });
      return drugInfo;
    },
    changeKey() {
      this.getqueueList();
    },
    // 左侧
    changeTabs(val) {
      this.keyword = "";
      // console.log(val,'33')
      if (val === 0) {
        this.type = 1;
        this.getqueueList();
      } else {
        this.type = 2;
        this.getqueueList();
      }
    },
    // 获取排队列表
    getqueueList() {
      queueList({ type: this.type, keyword: this.keyword }).then((res) => {
        if (this.jdclock) {
          window.clearInterval(this.jdclock);
        }
        if (this.jzclock) {
          window.clearInterval(this.jzclock);
        }
        this.totalTime = res.wait_time; // 倒计时总时长
        if (this.type === 0 || this.type === 1) {
          this.dropsList = res.jd;
          this.jd_wait = res.jd_wait;
          if (this.jd_wait.id) {
            const time = this.jd_wait.call_time * 1;
            // console.log(this.jd_wait, time, 'time', 1)
            // const newtime = dayjs().unix()
            const newtime = res.now_time;
            // console.log(newtime, 'newtime', 1)
            const alltime = time + this.totalTime - newtime;
            // console.log(alltime, 'alltime', 1)
            this.jdtime = alltime > 0 ? alltime : 0;
            if (alltime > 0) {
              this.jdclock = window.setInterval(() => {
                if (this.jdtime <= 0) {
                  window.clearInterval(this.jdclock);
                  this.getqueueList();
                } else {
                  this.jdtime--;
                }
              }, 1000);
            } else {
              for (let i in this.dropsList) {
                if (
                  this.dropsList[i].status == 2 &&
                  this.dropsList[i].is_pass == 0
                ) {
                  this.dropsList[i].is_pass = 1;
                  break;
                }
              }
            }
          }
        }
        if (this.type === 0 || this.type === 2) {
          this.muscleList = res.jz;
          this.jz_wait = res.jz_wait;
          if (this.jz_wait.id) {
            const time = this.jz_wait.call_time * 1;
            // console.log(time, 'time', 2)
            // const newtime = dayjs().unix()
            const newtime = res.now_time;
            // console.log(newtime, 'newtime', 2)
            const alltime = time + this.totalTime - newtime;
            // console.log(alltime, 'alltime', 2)
            this.jztime = alltime > 0 ? alltime : 0;
            if (alltime > 0) {
              this.jzclock = window.setInterval(() => {
                if (this.jztime <= 0) {
                  window.clearInterval(this.jzclock);
                  this.getqueueList();
                } else {
                  this.jztime--;
                }
              }, 1000);
            } else {
              for (let i in this.muscleList) {
                if (
                  this.muscleList[i].status == 2 &&
                  this.muscleList[i].is_pass == 0
                ) {
                  this.muscleList[i].is_pass = 1;
                  break;
                }
              }
            }
          }
        }
      });
    },
    // 叫号
    countDown(item, index, type) {
      this.type = type;
      queueCall({ id: item.id }).then((res) => {
        if (type === 1) {
          this.dropsList[index].status = 2;
          this.jdtime = this.totalTime;
        } else {
          this.muscleList[index].status = 2;
          this.jztime = this.totalTime;
        }
      });
    },
    changeInfusion(row) {
      this.$set(this.infusion, "id", row.id);
      this.getqueueInfo(row.id);
      this.modalstatus = true;
    },
    // 获取输液信息
    getqueueInfo(val) {
      queueInfo({ id: val }).then((res) => {
        this.infusion = res;
        // console.log(this.infusion.patient.name, '1')
      });
    },
    infosave() {
      // queueInfusion
      if (!this.infusion.operate_id) {
        this.$Message.error("请选择操作人");
        return;
      }
      if (this.infusloading) {
        return;
      }
      this.infusloading = true;
      const params = {
        id: this.infusion.id,
        operate_id: this.infusion.operate_id,
      };
      queueInfusion(params)
        .then((res) => {
          this.$Message.success("确认输液");
          if (this.type === 1 || this.type === 0) {
            this.jdtime = 0;
          }
          if (this.type === 2 || this.type === 0) {
            this.jztime = 0;
          }
          this.infusloading = false;
          this.cancel();
        })
        .catch((err) => {
          this.infusloading = false;
          this.cancel();
        });
    },
    cancel() {
      this.infusion.operate_id = "";
      this.modalstatus = false;
    },
    // 撤销排队
    changebackout(item) {
      this.$Modal.confirm({
        title: "撤销排队",
        content: "<p>是否确定撤销当前排队</p>",
        onOk: () => {
          queueCancel({ id: item.id }).then((res) => {
            this.$Message.info("撤销成功");
            // this.getqueueList()
          });

          // this.show = false;
        },
        onCancel: () => {
          // this.$Message.info('取消');
        },
      });
    },
    // 右侧患者列表
    // 搜索
    changeEnter() {
      this.searchForm.date = [];
      this.searchForm.clinic_id = "";
      this.searchForm.record_type = "";
      this.page = 1;
      this.getpatientList();
    },
    askDatasoperate() {
      this.page = 1;
      this.getpatientList();
    },
    changeClinic() {
      this.page = 1;
      this.getpatientList();
    },
    changePage(page) {
      this.page = page;
      this.getpatientList();
    },
    changePageSize(pagesize) {
      this.pageSize = pagesize;
      this.getpatientList();
    },
    // 获取诊疗室
    getclinicList() {
      GetClinicList().then((res) => {
        this.clinicList = res.list;
      });
      infusiontreatmentrecordtype().then((res) => {
        this.clinicLists = res;
      });
    },
    // 获取患者列表
    getpatientList() {
      const params = {
        keywords: this.searchForm.keywords,
        start_time: this.searchForm.date[0]
          ? dayjs(this.searchForm.date[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.searchForm.date[1]
          ? dayjs(this.searchForm.date[1]).format("YYYY-MM-DD")
          : "",
        clinic_id: this.searchForm.clinic_id,
        record_type: this.searchForm.record_type,
        page: this.page,
        pageSize: this.pageSize,
      };
      patientList(params).then((res) => {
        this.operatedata = res.list;
        this.total = res.total;
      });
    },
    // 编辑
    edit(row) {
      this.modalDrawer = true;
      this.row = row;
      this.$refs.list.initial(row);
    },
    // 排队
    lineUp(row) {
      this.tags_name_arr = row.tags_name_arr;
      this.getpatientdrugList(row.id);
      this.patient_user_id = row.id;
      this.linestatus = true;
    },
    // 获取排队列表药品
    getpatientdrugList(val) {
      patientdrugList({ id: val }).then((res) => {
        this.jdList = res.jd;
        this.lineupjdwait = res.jd_wait;
        this.lineupjzwait = res.jz_wait;
        this.jzList = res.jz;
        this.jddrugId =
          res.jd_wait.drug_surplus_id === undefined
            ? []
            : res.jd_wait.drug_surplus_id;
        this.jzdrugId =
          res.jz_wait.drug_surplus_id === undefined
            ? []
            : res.jz_wait.drug_surplus_id;
      });
    },
    lineSave() {
      if (this.jddrugId.length > 0 && this.lineupjdwait.id === undefined) {
        const params = {
          patient_user_id: this.patient_user_id,
          surplus_drug_id: this.jddrugId.join(","),
          type: 1,
        };
        queueCreate(params).then((res) => {
          this.$Message.success("静滴排队成功");
          this.lineCancel();
          // this.type = 1
          // this.muscleList=this.copymuscleList
        });
      }
      if (this.jzdrugId.length > 0 && this.lineupjzwait.id === undefined) {
        const params = {
          patient_user_id: this.patient_user_id,
          surplus_drug_id: this.jzdrugId.join(","),
          type: 2,
        };
        queueCreate(params).then((res) => {
          this.$Message.success("肌注排队成功");
          this.lineCancel();
          // this.type = 2
          // this.dropsList=this.copydropsList
        });
      }
      this.lineCancel();
    },
    lineCancel() {
      this.jddrugId = [];
      this.jzdrugId = [];
    },
    // 打印
    printClick(row, status) {
      // console.log(row, 'row')
      this.queue_id = row.id;
      this.printtype = status;
      this.printData = row;
      this.printDataList = [];
      if (this.printData.drug_list.length > 4) {
        let n = 4;
        for (var i = 0; i < this.printData.drug_list.length; i += n) {
          this.printDataList.push(this.printData.drug_list.slice(i, i + n));
          console.log(this.printDataList);
        }
      } else {
        this.printDataList = [this.printData.drug_list];
      }
      this.printstatus = true;
    },
    printSave() {
      const params = {
        queue_id: this.queue_id,
        print_type: this.printtype === 1 ? "py" : "xs",
      };
      updatePrint(params).then((res) => {
        // console.log('请求打印成功')
        this.getqueueList();
      });
      // this.$Print(this.$refs.container);
      if (this.printtype === 1) {
        this.printContent();
      } else {
        this.$Print(this.$refs.container);
      }
    },
    printContent() {
      // 根据id获取打印的html内容
      let newStr = document.getElementById("printArea").innerHTML;
      let div = document.createElement("div");

      div.style.background = "#fff";
      div.innerHTML = newStr;
      document.getElementById("app").style.display = "none";

      document.body.appendChild(div);
      // 调用打印弹窗
      this.printstatus = false;
      setTimeout(() => {
        window.print();
        window.close();
        window.document.body.removeChild(div);
        document.getElementById("app").style.display = "block";
      }, 500);
    },
    printCancel() {},
  },
};
</script>
<style lang="less">
//静滴，肌注样式
.ul {
  border-bottom: 1px solid #e8eaec;
}
.items {
  // display: flex;
  // justify-content:flex-start;
  padding: 10px 5px;
}
// .item_li{
//   display: flex;
//   justify-content: flex-start;
//   flex: 1;
// }
.order {
  width: 48px;
  height: 48px;
  border-radius: 50px;
  background: #ddd;
  margin-right: 12px;
  line-height: 48px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.titleName {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 12px;
  color: #515a6e;
  font-size: 16px;
  line-height: 24px;
}
.description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 24px;
}
.action {
  margin-top: 16px;
}
.action_ac {
  position: relative;
  top: 40%;
}
.activeClass {
  color: rgb(255, 153, 0);
}
.activeClass:hover {
  color: rgb(255, 153, 0);
}
.info {
  display: flex;
  justify-content: flex-start;
}
.info_title {
  line-height: 25px;
}
.operator {
  margin-right: 8px;
}
.operator::before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 14px;
  color: #ed4014;
}
.lineCard {
  display: flex;
  justify-content: flex-start;
}
.drug {
  color: #000;
  border: 1px solid #999;
  width: 430px;
  height: 310px;
  padding: 16px;
  position: relative;
  margin-bottom: 25px;
}
.infobox {
  display: flex;
  align-items: center;
  padding: 9px 20px;
}
.dragname {
  // font-size: 20px;
  font-weight: 900;
  // padding: 0 12px;
  //   border-bottom: 1px solid #000;
}
.dragnames {
  font-size: 22px;
}
.dragstyle {
  font-size: 18px;
  font-weight: 600;
  // padding: 0 10px;
}
.druginfo {
  // margin-bottom: 20px;
  font-family: "Microsoft YaHei";
  display: flex;
  justify-content: flex-start;
}
.inscribe {
  position: absolute;
  bottom: 15px;
  font-size: 16px;
}
.single {
  color: #000;
  //   width: 830px;
  //   height:520px;
  // border: 2px solid #000;
  padding: 24px 0 24px 24px;
  font-size: 18px;
  position: relative;
  font-family: "Microsoft YaHei";
}
.moveClass {
  color: #e3d6cc;
}
.moveClass:hover {
  color: #e3d6cc;
}
.printColor {
  color: #808695;
}
.printColor:hover {
  color: #808695;
}
.table_name {
  display: flex;
  justify-content: flex-start;
}
.tableli {
  padding: 10px 0;
}
.fontstyle {
  font-size: 16px;
}
.container {
  display: grid;
  grid-template-columns: 360px 120px 120px 120px;
  grid-template-rows: 35px 55px 55px 55px 55px;
  // border: 1px solid #000;
  vertical-align: middle;
  text-align: center;
}
.containerelse {
  display: grid;
  grid-template-columns: 360px 120px 120px;
  grid-template-rows: 35px 55px 55px 55px;
  // border: 1px solid #000;
  vertical-align: middle;
  text-align: center;
}
.contbox {
  border: 1px solid black;
  margin-left: -1px;
  margin-top: -1px;
  padding: 6px 0;
  word-wrap: break-word;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drugline {
  text-align: left;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.ml {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.singleboxs {
  width: 780px;
  max-height: 520px;
  margin: 10px;
}
.singlebox {
  height: 520px;
  margin: 10px;
}
.name {
  padding-left: 0;
}
.line {
  display: block !important;
}
</style>
<style media="print">
@media print {
  html {
    height: auto;
    margin: 0;
  }
}
</style>
